<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style type="text/css">
        /*
            border-style：边距类型
            border-color：边框颜色
            border-width：边框粗细
            设置的时候：都是按照 上右下左的顺序一次赋值！
        */
        *{ /*给页面中所有的元素清空内外边距*/
            margin: 0px;
            padding: 0px;
        }
        #box{
            width: 300px; /*整个盒子的宽度*/
            border: 1px solid red; /*盒子的边框*/
            margin: 0px auto; /*盒子相对于浏览器    水平居中*/
            /*网页水平居中的必要条件
            01.是块元素
            02.固定的宽度？？？？ span是根据内容来自动调整宽度！！！
            */
        }
        div:nth-of-type(1) input{
            border: 1px solid red; /*1px 红色的实线*/
        }
        div:nth-of-type(3) input{
            border: 1px dotted pink; /*1px 粉色的点实线*/
        }
        h2{
            height: 35px; /*h2的高度*/
            line-height: 35px; /*行高*/
            background: #3A6587;
            color: #F8F8F3;
            padding-left: 20px;
        }
        form{
            background: #C8ECE3;
        }
    </style>
</head>
<body>
    <div id="box">
        <h2>会员登录</h2>
        <form action="#" method="post">
            <div>
                姓名：<input type="text">
            </div>
            <div>
                邮箱：<input type="text">
            </div>
            <div>
                电话：<input type="text">
            </div>
        </form>
    </div>
</body>
</html>